jq-zTree使用

传统网站使用jq-ztree比较多，做一些技术总结

ztree网站api：http://www.treejs.cn/v3/api.php

//引入css，自己的css，ztree的css
<link rel="stylesheet" href="../../../css/main.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">

//引入jq, ztree.core.js,
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core-3.5.js"></script>
//如果勾选，引入ztree.excheck.js
<script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.5.js"></script>
//如果编辑树【拖拽，删除，批量加载】，引入ztree.exedit.js。
<script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.5.js"></script>
<script>
//编写配置代码
   var zTreeObj;
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {};
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [
    {
        name:"test1",
        open:true, 
        children:[
          {name:"test1_1"}, 
          {name:"test1_2"}
        ]
     },
     {
         name:"test2", 
         open:true, 
         children:[
           {name:"test2_1"},
           {name:"test2_2"}
      ]
     }
  ];
    //将数据加载到DOM中
   $(document).ready(function(){
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   });
</script>

//dom文本中引用
<div>
    //id存放树的区域，class需要添加ztree才会有效果
    <ul id="treeDemo" class="ztree">
    </ul>
</div>

1、节点不显示 checkbox / radio

//想要节点不显示勾选框，给数据添加nocheck属性，默认false显示，true为不显示。
var zNodes = [
    {
        name:"test1",
        open:true, 
        nocheck:true //nocheck为true时没有勾选框
        children:[
          {name:"test1_1"}, 
          {name:"test1_2"}
        ]
     }
  ];

2、树展开

//给数据添加open，默认false不展开，true展开。
var zNodes = [
    {
        name:"test1",
        open:true, //open为true时展开
        nocheck:true 
        children:[
          {name:"test1_1"}, 
          {name:"test1_2"}
        ]
     }
  ];
//通过获取节点添加展开属性
var zTreeObj = $.fn.zTree.getZTreeObj("tree");
var sNodes = zTreeObj .getSelectedNodes();
if (sNodes.length > 0) {
    var isOpen = sNodes[0].open;
}

3、多层树，数据没有子元素的分级，在同一层时需要进行数据处理

//同一层的数据
 {
    "list": [{
        "value": "01",
        "text": "大业务"
    }, {
        "value": "02",
        "text": "大金融"
    }, {
        "value": "0101",
        "text": "大业务分支1"
    }, {
        "value": "0201",
        "text": "大金融分支1"
    }, {
        "value": "0202",
        "text": "大金融分支2"
    }, {
        "value": "020101",
        "text": "大金融分支1子分支1"
    }, {
        "value": "020102",
        "text": "大金融分支1子分支2"        
    }]
}
//需要转换ztree需要的分级格式，需要id，name，pId
//pId指向当前节点的父级
$.each(data_type, function(i, v) {
    var bean = {};
    bean.id = v.value;
    bean.name = v.text;
    bean.pId = v.value.slice(0, v.value.length - 2); //pId需要分级
})
//处理后的数据
{
    "list": [{
        "id ": "01",
        "text": "大业务",
        "pId": "0",        
    }, {
        "id": "02",
        "text": "大金融",
        "pId": "0",    
    }, {
        "id": "0101",
        "text": "大业务分支1",
        "pId": "01",        
    }, {
        "id": "0201",
        "text": "大金融分支1",
        "pId": "02",        
    }, {
        "id": "0202",
        "text": "大金融分支2",
        "pId": "02",        
    }, {
        "id": "020101",
        "text": "大金融分支1子分支1",
        "pId": "0201",        
    }, {
        "id": "020102",
        "text": "大金融分支1子分支2",
        "pId": "0201",        
    }]
}